 <template>
  <table :v-model="TableData" style="width: 100%">
    <el-card
      style="
        max-width: 100%;
        max-height: 1000px;
        margin-top: 8px;
        text-align: left;
      "
    >
      <el-button type="info" @click="dialogVisible = true">修改</el-button>
      <el-button type="success" @click="ShowInfo">返回上一页</el-button>
      <br />
      <br />
      <br />
      <el-row :gutter="24">
        <el-col :span="10" :offset="0">
          <span>基础信息</span>
          <br />
          <br />
          <p>支出单号：{{ TableData.TheInvoiceNumber }}</p>
          <br />
          <p>支出类型：{{ TableData.ExpenditureTypeId }}</p>
          <br />
          <p>采购订单：</p>
          <br />
          <p>备注：{{ TableData.Remark }}</p>
          <br />
          <br />

          <span>◆ 收款方信息</span>
          <br />
          <br />
          <br />
          <p>收款方：{{ TableData.Payee }}</p>
          <br />
          <p>账户名称：{{ TableData.AccountName }}</p>
          <br />
          <p>网点名称：{{ TableData.NetworkName }}</p>
          <br />
          <br />
          <br />

          <span>◆ 采购订单</span>
          <br />
          <br />
          <br />
          <p>采购订单主题：{{ TableData.PurchaseOrderSubject }}</p>
          <br />
          <p>入库状态：{{ TableData.StorageStatus }}</p>
          <br />
          <p>已付款金额：{{ TableData.AmountPaid }}</p>
          <br />
        </el-col>
        <el-col :span="10" :offset="0">
          <br />
          <br />
          <p>支出主题：{{ TableData.SupportingTopic }}</p>
          <br />
          <p>支出日期：{{ TableData.PurchaseDate }}</p>
          <br />
          <p>付款金额：{{ TableData.PaymentAmount }}</p>
          <br />
          <p></p>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <p>开户银行：{{ TableData.DepositBank }}</p>
          <br />
          <p>银行账号：{{ TableData.BankAccount }}</p>
          <br />
          <p></p>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <!-- <p>采购日期：{{ TableData.name }}</p>
          <br />
          <p>总金额：{{ TableData.name }}</p> -->
          <br />
          <p></p>
          <br
        /></el-col>
      </el-row>
      <span>附件</span>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:5055/api/Sale/GetImage"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="TableData.Attachment"
          :src="TableData.Attachment"
          class="avatar"
          prop="Attachment"
          style="width: 100px; height: 100px"
        />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-card>
  </table>
  <el-dialog v-model="dialogVisible" title="Tips" width="800">
    <el-form
      ref="ruleFormRef"
      style="max-width: 1000px"
      :model="TableData"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <span style="text-align: left">基础信息</span>
      <br />
      <br />
      <el-row :gutter="24">
        <el-col :span="12" :offset="0">
          <el-form-item label="支出单号" prop="TheInvoiceNumber">
            <el-input v-model="TableData.TheInvoiceNumber" />
          </el-form-item>
          <el-form-item label="支出类型" prop="ExpenditureTypeId">
            <el-select
              v-model="TableData.ExpenditureTypeId"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="item in ExpenditureTypeList"
                :key="item.ExpenditureTypeId"
                :label="item.ExpenditureTypeName"
                :value="item.ExpenditureTypeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="Remark">
            <el-input v-model="TableData.Remark" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="支出主题" prop="SupportingTopic">
            <el-input v-model="TableData.SupportingTopic" />
          </el-form-item>
          <el-form-item label="支出日期" prop="SupportDate">
            <el-date-picker
              v-model="TableData.SupportDate"
              type="date"
              label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="付款金额" prop="PaymentAmount">
            <el-input v-model="TableData.PaymentAmount" /> </el-form-item
        ></el-col>
      </el-row>
      <span style="text-align: left">收款方信息</span>
      <br />
      <br />
      <el-row :gutter="24">
        <el-col :span="12" :offset="0">
          <el-form-item label="收款方" prop="Payee">
            <el-input v-model="TableData.Payee" />
          </el-form-item>
          <el-form-item label="账户名称" prop="AccountName">
            <el-input v-model="TableData.AccountName" />
          </el-form-item>
          <el-form-item label="网点名称" prop="NetworkName">
            <el-input v-model="TableData.NetworkName" /> </el-form-item
        ></el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="开户银行" prop="DepositBank">
            <el-input v-model="TableData.DepositBank" />
          </el-form-item>
          <el-form-item label="银行账号" prop="BankAccount">
            <el-input v-model="TableData.BankAccount" /> </el-form-item
        ></el-col>
      </el-row>
      <span style="text-align: left">采购订单</span>
      <br />
      <br />
      <el-row :gutter="24">
        <el-col :span="12" :offset="0">
          <el-form-item label="采购订单主题" prop="PurchaseOrderSubject">
            <el-input v-model="TableData.PurchaseOrderSubject" />
          </el-form-item>
          <el-form-item label="入库状态" prop="StorageStatus">
            <el-input v-model="TableData.StorageStatus" />
          </el-form-item>
          <el-form-item label="已收款金额" prop="AmountPaid">
            <el-input v-model="TableData.AmountPaid" /> </el-form-item
        ></el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="采购日期" prop="PurchaseDate">
            <el-date-picker
              v-model="TableData.PurchaseDate"
              type="date"
              label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="总金额" prop="AggregateAmount">
            <el-input v-model="TableData.AggregateAmount" /> </el-form-item
        ></el-col>
      </el-row>
      <span style="text-align: left">附件</span>
      <br />
      <br />
      <el-upload
        class="avatar-uploader"
        action="http://localhost:5055/api/Sale/GetImage"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="TableData.Attachment"
          :src="TableData.Attachment"
          class="avatar"
          prop="Attachment"
          style="width: 100xp; height: 100px"
        />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <br />
      <br />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="UpdateInfo()">确定</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElTable } from "element-plus";
import { reactive } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import { UploadFilled } from "@element-plus/icons-vue";
import { ElMessage, ElUpload } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { ElMessageBox } from "element-plus";
import router from "@/router";

const dialogVisible = ref(false);

const route = useRoute();
// do not use same name with ref
const TableData = reactive({
  TheInvoiceNumber: "",
  NewExpenditureId: "",
  ExpenditureTypeId: "",
  Remark: "",
  SupportingTopic: "",
  SupportDate: "",
  PaymentAmount: "",
  Payee: "",
  AccountName: "",
  NetworkName: "",
  DepositBank: "",
  BankAccount: "",
  PurchaseOrderSubject: "",
  StorageStatus: "",
  AmountPaid: "",
  PurchaseDate: "",
  AggregateAmount: "",
  Attachment: "",
});
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => {
  TableData.Attachment = response;
};
const ShowInfo = () => {
  router.push("/UserList/showitionalExpenditure");
};
const NewExpenditure = () => {
  axios
    .get(
      `AdditionalExpenditure/EditAdditionalExpenditure?NewExpenditureId=${route.query.NewExpenditureId}`
    )
    .then((res) => {
      TableData.NewExpenditureId = res.data.NewExpenditureId;
      TableData.TheInvoiceNumber = res.data.TheInvoiceNumber;
      TableData.ExpenditureTypeId = res.data.ExpenditureTypeId;
      TableData.Remark = res.data.Remark;
      TableData.SupportingTopic = res.data.SupportingTopic;
      TableData.SupportDate = res.data.SupportDate;
      TableData.PaymentAmount = res.data.PaymentAmount;
      TableData.Payee = res.data.Payee;
      TableData.AccountName = res.data.AccountName;
      TableData.NetworkName = res.data.NetworkName;
      TableData.DepositBank = res.data.DepositBank;
      TableData.BankAccount = res.data.BankAccount;
      TableData.PurchaseOrderSubject = res.data.PurchaseOrderSubject;
      TableData.StorageStatus = res.data.StorageStatus;
      TableData.AmountPaid = res.data.AmountPaid;
      TableData.PurchaseDate = res.data.PurchaseDate;
      TableData.AggregateAmount = res.data.AggregateAmount;
      TableData.Attachment = res.data.Attachment;
    });
};

NewExpenditure();
interface User {
  date: string;
  name: string;
  address: string;
}
const ExpenditureTypeList = ref([]);
const GetExpenditureTypeList = () => {
  axios.get("AdditionalExpenditure/GetExpenditureType").then((res) => {
    ExpenditureTypeList.value = res.data;
  });
};
const UpdateInfo = () => {
  axios
    .put(`AdditionalExpenditure/UpdateAdditionalExpenditure`, TableData)
    .then((res) => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message);
        dialogVisible.value = false;
      }
    });
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
GetExpenditureTypeList();
</script> 
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>